<template>
    <div>
        <h2 style="display:flex;align-items:center;justify-content:center;color: #034984">请填写发布内容</h2>
        <el-divider></el-divider>
        <div style="padding-left: 5%">
            <el-row :gutter="20">
                <el-col :span="8">
                    <span style="font-size: 20px;font-weight: bold">题目: </span>&nbsp &nbsp
                    <el-input v-model="news.title" placeholder="请填写题目(必填)" style="width: 350px"></el-input>
                </el-col>
                <el-col :span="10">
                    <span style="font-size: 20px;font-weight: bold">作者: </span>&nbsp &nbsp
                    <el-input v-model="news.author" placeholder="请填写作者(必填)" style="width: 200px"></el-input>
                </el-col>
                <el-col :span="2">
                    <div style="display:flex;align-items:center;justify-content:center;">
                        <el-button @click="getUEContent()" type="primary" plain style="font-size: 15px;font-weight:bold">发布
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div>
                        <el-button @click="newsDeleteManage" type="danger" plain style="font-size: 15px;font-weight:bold">管理
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-divider></el-divider>
        <div class="components-container">
            <div class="editor-container">
                <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
            </div>
            <el-divider></el-divider>
        </div>



        <div>
            ============================================================
        </div>
        <div v-html="news.article">
        </div>
        <div>
            ============================================================
        </div>
        <div v-html="newsByTitle.article">
        </div>
    </div>
</template>
<script>
    import UE from '../../util/UEditorTemplate.vue';

    export default {
        components: {UE},

        data() {
            return {
                news: {
                    title: "",
                    newstime: "",
                    author: "",
                    article: null,
                    nsource: "",
                },
                defaultMsg: '',
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 350,
                    toolbars: [[
                        'fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                        'directionalityltr', 'directionalityrtl', 'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                        'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                        'emotion', 'insertcode', 'pagebreak', 'template', '|',
                        'horizontal', 'date', 'time', 'spechars', '|',
                        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                        'print', 'preview'
                    ]]
                },



                title: "jjb",
                newsByTitle: {
                    title: "",
                    newstime: "",
                    author: "",
                    article: null,
                    nsource: "",
                },
            }
        },
        created() {
            this.getNewsByTitle()
        },
        methods: {
            getUEContent() {
                let content = this.$refs.ue.getUEContent();
                console.log(content)
                this.news.article = content
                if(this.news.title===""||this.news.author===""){
                    this.$message.error("请检查是否输入题目或作者");
                }else{this.insertNews()}
            },
            async insertNews() {
                const {data: res} = await this.$http.post("insertNews", this.news);
                if (res === "ok") {
                    this.$router.go(0);
                    this.$message.success("成功");
                } else {
                    this.$message.error("失败")
                }
            },

            newsDeleteManage(){
                this.$router.push("/managerHomer/newsDelete")
            },

            async getNewsByTitle() {
                const {data: res} = await this.$http.get("getNewsByTitle?title=" + this.title);
                this.newsByTitle = res
            },
        }
    };
</script>
<style scoped>
    .info {
        border-radius: 10px;
        line-height: 20px;
        padding: 10px;
        margin: 10px;
        background-color: #ffffff;
    }

    .el-divider--horizontal {
        margin: 5px 0;
        background: 0 0;
        border-top: 4px dashed #00eacd;
    }
</style>